// 库引入
import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';
import {Row, Col} from 'antd';
import {computed, autorun} from 'mobx';
import {Link} from 'react-router-dom';

// 组件引入
import {LayoutDefault} from '../../layouts/LayoutDefault';
import {DenyTrafficHijacking} from '../../components/DenyTrafficHijacking';
import {InjectTotalProjectsTip} from './components/TotalProjectsTip';
import {InjectSearch} from './components/Search';
import {PopularLibraries} from './components/PopularLibraries';
import {InjectLibsList} from './components/LibsList';

// utils引入
import {trimUrlSpritCharsEndInProps} from '../../utils/trimSpritCharsEnd';
import {f, fPromise} from '../../utils/f2f';

// 样式引入
import styles from './style.module.less';

@observer
class PageLibrarylist extends Component {
  disposers = [];

  @computed get matchUrl() {
    return trimUrlSpritCharsEndInProps(this.props);
  }

  // 是否显示全部库
  @computed get showAllLibs() {
    // 如果pathname为/library-list/all就要显示全部库
    return this.matchUrl === '/library-list/all';
  }

  componentDidMount() {
    // 查询库列表信息
    this
      .props
      .getLibraries();
    this
      .disposers
      .push(autorun(() => {
        this
          .props
          .setShowAllLibs(this.showAllLibs);
      }));
  }

  componentWillUnmount() {
    this
      .disposers
      .forEach(disposer => disposer());
  }

  render() {
    const AppendToHeader = (
      <Fragment>
        <InjectTotalProjectsTip/>
        <Row className={styles.pageLibrarylist_searchRow} type="flex" justify="center">
          <Col xs={24} md={16}>
            <InjectSearch/>
          </Col>
        </Row>
      </Fragment>
    );
    const Content = (
      <Fragment>
        <PopularLibraries/>
        <div className="container clearfix">
          <div className={styles.pageLibrarylist_denyTrafficHijackingBar}><DenyTrafficHijacking/></div>
          <InjectLibsList className={styles.pageLibrarylist_libList}/> {this.showAllLibs
            ? null
            : (
              <Link className={styles.showAllLibsLink} to="/library-list/all">所有开源列表</Link>
            )}
        </div>
      </Fragment>
    );
    return (
      <div
        className={classNames(styles.pageLibrarylist, 'page', this.props.className)}>
        <LayoutDefault appendToHeader={AppendToHeader} content={Content} />
      </div>
    );
  }
}

PageLibrarylist.defaultProps = {
  // 查询所有开源列表的方法
  getLibraries: fPromise,
  // 设置是否显示全部库的方法
  setShowAllLibs: f
};

const InjectPageLibrarylist = inject(({
  libsStore = {}
}) => ({getLibraries: libsStore.allLibs.onceFetchData, setShowAllLibs: libsStore.setShowAll}))(PageLibrarylist);

export {PageLibrarylist, InjectPageLibrarylist};